<template>
  <div
    class="bgAll soundBox"
    :class="{ on: showIt }"
  >
    <div
      class="sound_in soundBox"
      :class="{ on: showIt }"
    >
      <div class="sound_txt">
        录音中…
      </div>
      <div class="sound_btns">
        <div
          class="finished_btn cancel_btn"
          @click="cancelRecord"
        >
          取消
        </div>
        <div
          class="finished_btn get_words"
          @click="clickFinish"
        >
          结束录音
        </div>
      </div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
// import wx from 'weixin-js-sdk';
import axios from 'axios'
import { Toast } from 'vant'
import qs from 'qs'
const base_url = process.env.BASE_API
import { getCookies } from '@/utils/util.js'
export default {
  beforeRouteLeave(to, from, next) {
    wx.stopRecord({
      success(res) {},
      cancel(err) {
        Toast('用户拒绝授权录音')
      },
    })
    next()
  },
  props: ['recordBox'],
  data() {
    return {
      START: null, //开始录音时间
      isVoice: false, //监听录音
      showIt: false,
      recordTimer: null,
    }
  },
  watch: {
    recordBox(oldVal, newVal) {
      this.showIt = oldVal
      if (oldVal) {
        this.clickRecord()
      }
    },
  },
  mounted() {
    this.getRecordInfo()
  },
  onbeforeunload() {
    this.cancelRecord()
  },
  destroyed() {
    this.cancelRecord()
  },
  methods: {
    // 获取录音配置
    getRecordInfo(e) {
      let vm = this
      axios({
        url: `${base_url}/proxy/qywx/jsdkConfig`,
        method: 'post',
        data: qs.stringify(
          // { url: 'http://bkt.autocnd.com' },
          { url: location.href.split('#')[0] },
          { encode: false }
        ),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          satoken: getCookies('token'),
        },
      }).then((res) => {
        let jsdk = res.data.data
        localStorage.setItem('jsdk', JSON.stringify(res.data.data))
        wx.config({
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: jsdk.corpid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
          timestamp: jsdk.timestamp, // 必填，生成签名的时间戳
          nonceStr: jsdk.nonceStr, // 必填，生成签名的随机串
          signature: jsdk.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['startRecord', 'stopRecord', 'translateVoice', 'onVoiceRecordEnd'], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        })
        wx.ready(function (res) {
          wx.checkJsApi({
            jsApiList: ['startRecord', 'stopRecord', 'translateVoice', 'onVoiceRecordEnd'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function (res) {
              // console.log(res, "成功");
            },
            fail(err) {
              // console.log(err, "失败");
            },
            complete(opt) {
              // console.log(opt, "完成");
            },
          })

          wx.onVoiceRecordEnd({
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
            complete: function (res) {
              vm.showIt = false
              vm.$emit('changeRecordBox', false)
              vm.getWords(res.localId)
            },
          })
        })

        wx.error(function (res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          console.log(res, '失败')
        })
      })
    },
    // 点击录音
    clickRecord(e) {
      let _this = this

      _this.START = new Date().getTime()
      _this.recordTimer = setTimeout(function () {
        wx.startRecord({
          success(res) {
            // console.log(res, "开始录音");
          },
          cancel(err) {
            Toast(err, '用户拒绝授权录音')
          },
        })
      }, 300)
    },
    // 取消录音
    cancelRecord(e) {
      this.showIt = false
      this.$emit('changeRecordBox', false)
      wx.stopRecord({
        success(res) {},
        cancel(err) {},
      })
    },

    // 结束录音

    clickFinish(e) {
      let _this = this,
        END = new Date().getTime()
      e.preventDefault()

      this.showIt = false
      _this.$emit('changeRecordBox', false)
      if (END - _this.START < 1000) {
        END = 0
        _this.START = 0
        //小于300ms，不录音
        clearTimeout(_this.recordTimer)

        Toast('时间过短')
      } else {
        this.finished()
      }
    },
    // 结束录音
    finished() {
      let _this = this
      _this.showIt = false
      clearTimeout(_this.recordTimer)
      wx.stopRecord({
        success(res) {
          _this.getWords(res.localId)
        },
        cancel(err) {
          Toast('用户拒绝授权录音')
        },
      })
    },
    // 转化成文字
    getWords(id) {
      let _this = this
      if (id == '') {
        Toast('请先使用 startRecord 接口录制一段声音')
        return
      }

      wx.translateVoice({
        localId: id,
        complete(res) {
          if (res.hasOwnProperty('translateResult')) {
            _this.$emit('translateResult', res.translateResult)
            _this.isVoice = true
          } else {
            Toast('无法识别')
          }
        },
      })
    },
  },
}
</script>

<style scoped>
.soundBox {
  display: none;
}

.soundBox.on {
  display: block;
}
.sound_in {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 22;
  width: 80%;
  max-width: 300px;
  background: #fff
    url()
    center 10px no-repeat;
  -webkit-background-size: 200px;
  background-size: 200px;
  padding-top: 140px;
  border-radius: 5px;
  overflow: hidden;
}
.mai_bg {
  background: url()
    right no-repeat;
  -webkit-background-size: 18px;
  background-size: 18px;
  padding-right: 18px;
}

.sound_txt {
  text-align: center;
  font-size: 13px;
  color: #999;
  line-height: 17px;
  padding-bottom: 10px;
  margin-top: 10px;
}

.sound_btns {
  display: flex;
  justify-content: center;
  border-top: 1px solid #ccc;
}

.finished_btn {
  flex: 1;
  height: 45px;
  line-height: 45px;
  font-size: 15px;
  color: #5f646e;
  text-align: center;
  border-right: 1px solid #ccc;
}

.finished_btn:last-child {
  border-right: 0;
}

.finished_btn.get_words {
  color: #6cc40c;
}
.mask {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
</style>
</style>
